'use client'

import { useState } from "react"
import { Supplier } from "@prisma/client"
import { PencilIcon } from "@heroicons/react/24/outline"
import { EditSupplierDialog } from "./edit-supplier-dialog"

interface SupplierItemProps {
  supplier: Supplier
}

export function SupplierItem({ supplier }: SupplierItemProps) {
  const [isEditOpen, setIsEditOpen] = useState(false)

  return (
    <>
      <tr className="group">
        <td className="px-6 py-4 whitespace-nowrap">
          <div className="text-sm font-medium text-gray-900">{supplier.name}</div>
        </td>
        <td className="px-6 py-4 whitespace-nowrap">
          <div className="text-sm text-gray-900">{supplier.contact}</div>
        </td>
        <td className="px-6 py-4 whitespace-nowrap">
          <div className="text-sm text-gray-900">{supplier.phone}</div>
        </td>
        <td className="px-6 py-4 whitespace-nowrap">
          <div className="text-sm text-gray-900">{supplier.address}</div>
        </td>
        <td className="px-6 py-4 whitespace-nowrap">
          <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
            supplier.status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
          }`}>
            {supplier.status ? '启用' : '禁用'}
          </span>
        </td>
        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
          <button
            onClick={() => setIsEditOpen(true)}
            className="text-indigo-600 hover:text-indigo-900"
          >
            <PencilIcon className="h-5 w-5" />
          </button>
        </td>
      </tr>
      {isEditOpen && (
        <EditSupplierDialog
          supplier={supplier}
          open={isEditOpen}
          onClose={() => setIsEditOpen(false)}
        />
      )}
    </>
  )
} 